import {CommonComponentProps} from "../../../components/editor/interface.ts";
import {useMateRailDrop} from "../../hooks/useMaterialDrop.ts";
import {useDrag} from "react-dnd";
import React, {useEffect, useMemo, useRef} from "react";
import {Table as AntdTable} from "antd";


const TableDev = ({id, styles, name, children}: CommonComponentProps) => {
    /* 规定可以放什么类型的组件 */
    const {canDrop, drop} = useMateRailDrop(['TableColumn'], id);
    const divRef = useRef<HTMLDivElement>(null);
    const [_, drag] = useDrag({
        type:name,
        item: {
            type: name,
            dragType: 'move',
            id
        }
    })

    useEffect(() => {
        drop(divRef);
        drag(divRef);
    }, []);

    const columns = useMemo(() => {
        return React.Children.map(children, (item: any) => {
            return {
                title: (
                    <div className='m-[-16px] p-[16px]' data-component-id={item.props?.id}>{item.props?.title}</div>),
                dataIndex: item.props?.dataIndex,
                key: item.props?.id,
            }

        })
    }, [children])

    return (
        <div
            className={`w-[100%] ${canDrop ? 'border-[2px] border-[blue]' : 'border-[1px] border-[#000]'}`}
            ref={divRef}
            data-component-id={id}
            style={styles}
        >
            <AntdTable
                columns={columns}
                dataSource={[]}
                pagination={false}
            />
        </div>
    );
};

export default TableDev;